<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex主要属性</title>
    <style>
        #box1{
            display: flex;
            width: 100%;
            min-width: 960px;
            /* height: 100px; */
            border: 1px solid brown;
            display: flex;
            /* 父元素属性 */
            /* 
            flex-direction 设置子容器垂直布局
                row	默认值。灵活的项目将水平显示
                row-reverse	与 row 相同，但是以相反的顺序
                column	灵活的项目将垂直显示，正如一个列一样
                column-reverse	与 column 相同，但是以相反的顺序
                initial	设置该属性为它的默认值
                inherit	从父元素继承该属性
            */
            flex-direction: column;
            /* 
            justify-content 主轴（横轴）对齐方式
                flex-star 默认，位于开头
                flex-end  位于结尾
                center  位于中心
                space-between 各行之间留有空白
                space-around  隔行之前、之间、之后都留有空白
            */
            justify-content: space-around;
            /* 
            align-items 侧轴（纵轴）对齐方式
                stretch 默认，被拉伸适应容器
                center 位于中心
                flex-start 位于开头
                flex-end 位于结尾
            */
            align-items: center;
            /* 
            flex-wrap 让弹性盒子在必要时候拆行
                nowrap 默认，不拆行也不拆列
                wrap 在必要时拆行或拆列
                wrap-reverse 相反顺序拆行或拆列
                initial 设置该属性为它的默认值
                inherit 从父属性继承该属性 
            */
            flex-wrap: wrap;  
        }
        #box1>div{
            /* width: 35%; */
            height: 50px;
            border: 1px solid green;
            /* 
            flex-grow 规定盒子与其他盒子进行的扩展量，默认0
            */
        }
        #box1>div:nth-child(1){
            flex-grow:1
        }
        #box1>div:nth-child(2){
            flex-grow:5
        }
        #box1>div:nth-child(3){
            flex-grow:2
        }
    </style>
</head>
<body>
    <div id="box1">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>